<template>
	<view class="ticket-item u-flex u-flex-between">
		<view class="left u-flex u-flex-column u-flex-between">
			<view class="u-margin-bottom-10">
				<text class="color-main font-weight font-size15">{{ item.title }}</text>
			</view>
			<view class="u-margin-bottom-10">
				<text class="color-gray font-size14">{{ item.sub_title }}</text>
			</view>
			<view @tap="onShowDetails" class="font-size14" :style="{color:ee.bgColor.weight}">
				<text>查看详情</text><text> > </text>
			</view>
		</view>
		<view class="right  u-flex u-flex-column">
			<view class="u-margin-bottom-10 color-red">
				<text class="font-size11">¥ </text>
				<text class="font-size16 font-weight">{{ item.price_now }}</text>
				<text class="font-size10"></text>
			</view>
			<view class="u-margin-bottom-10">
				<text class="text-delete color-gray font-size14"> {{ item.orgin_price}}</text>
			</view>
			<view class="buy-go">

				<view class=" buy-go-btn " @click="clickItem(item.id)" :style="{backgroundColor:ee.bgColor.weight}">
					<text class="font-size14">预订</text>
				</view>

			</view>
		</view>
		<!-- 预定须知的底部弹窗 -->
		<popupTicketInfo v-model:showDetails="showDetails" :ticket="item"></popupTicketInfo>

	</view>
</template>

<script setup>
	import popupTicketInfo from './popup-ticket-info.vue';
	import {
		ref,
		reactive,
		onMounted,
		onActivated,
		watchEffect,
		watch,
		provide,
		nextTick,
		computed
	} from 'vue';



	const emits = defineEmits(['select'])

	const showDetails = ref(false);

	const props = defineProps({
		item: {
			type: [Array, Object]
		}
	})
	//点击查看详情 触发 显示下拉窗口
	function onShowDetails() {
		showDetails.value = true;
	}
	//点击底部下拉的关闭按钮
	function onClosePoup() {
		showDetails.value = false;
	}
	//点击预定按钮触发通知父组件 点击了
	function clickItem(id) {
		emits('select', id)
	}
</script>

<style lang="scss" scoped>
	.ticket-item {
		.left {
			width: 79.9%;
		}

		.right {
			width: 20%;
			text-align: center;
		}

		.buy-go-btn {
			border-radius: 50px;
			padding-left: 15px;
			padding-right: 15px;
			height: 26px;
			line-height: 26px;
			color: #fff;
			font-weight: bold;

		}

		.text-delete {
			text-decoration: line-through;
		}
	}
</style>